<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 产后恢复计划</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding: 16px;
                background-color: #f9f9f9;
            }
            .card {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                margin-bottom: 16px;
            }
            .card-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
            }
            .card-title i {
                margin-right: 8px;
                color: #ff9fb5;
            }
            .tabs {
                display: flex;
                background-color: #f5f5f5;
                border-radius: 8px;
                padding: 4px;
                margin-bottom: 16px;
            }
            .tab {
                flex: 1;
                text-align: center;
                padding: 8px 0;
                font-size: 14px;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .tab.active {
                background-color: #fff;
                color: #ff9fb5;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .progress-container {
                height: 6px;
                background-color: #f0f0f0;
                border-radius: 3px;
                margin: 8px 0;
                overflow: hidden;
            }
            .progress-bar {
                height: 100%;
                background-color: #ff9fb5;
                border-radius: 3px;
            }
            .timeline-container {
                position: relative;
                padding-left: 28px;
            }
            .timeline-container::before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 9px;
                width: 2px;
                background-color: #f0f0f0;
            }
            .timeline-item {
                position: relative;
                margin-bottom: 20px;
            }
            .timeline-item:last-child {
                margin-bottom: 0;
            }
            .timeline-dot {
                position: absolute;
                left: -28px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #fff;
                border: 2px solid #ff9fb5;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 2;
            }
            .timeline-dot.completed {
                background-color: #ff9fb5;
                color: white;
            }
            .timeline-content {
                background-color: #fff;
                border-radius: 8px;
                padding: 12px;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
            }
            .timeline-title {
                font-weight: 600;
                font-size: 15px;
                margin-bottom: 6px;
                color: #333;
            }
            .timeline-subtitle {
                font-size: 13px;
                color: #666;
                margin-bottom: 8px;
            }
            .timeline-date {
                font-size: 12px;
                color: #999;
            }
            .plan-item {
                display: flex;
                padding: 12px 0;
                border-bottom: 1px solid #f0f0f0;
            }
            .plan-item:first-child {
                padding-top: 0;
            }
            .plan-item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
            .plan-icon {
                margin-right: 12px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                color: white;
            }
            .plan-icon.physical {
                background-color: #ff9fb5;
            }
            .plan-icon.diet {
                background-color: #6ac8d0;
            }
            .plan-icon.mental {
                background-color: #a991d4;
            }
            .plan-icon.exercise {
                background-color: #ffb347;
            }
            .plan-content {
                flex: 1;
            }
            .plan-title {
                font-weight: 600;
                font-size: 15px;
                color: #333;
                margin-bottom: 4px;
            }
            .plan-description {
                font-size: 13px;
                color: #666;
                line-height: 1.4;
            }
            .checklist-item {
                display: flex;
                padding: 10px 0;
                align-items: center;
            }
            .checklist-checkbox {
                margin-right: 12px;
                width: 20px;
                height: 20px;
                border-radius: 4px;
                border: 1px solid #ddd;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                cursor: pointer;
                flex-shrink: 0;
            }
            .checklist-checkbox.checked {
                background-color: #ff9fb5;
                border-color: #ff9fb5;
            }
            .checklist-label {
                flex: 1;
                font-size: 14px;
            }
            .checklist-label.checked {
                text-decoration: line-through;
                color: #999;
            }
            .phase-tag {
                display: inline-block;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
                margin-right: 5px;
            }
            .phase-tag.early {
                background-color: #ffe1e7;
                color: #ff6d8f;
            }
            .phase-tag.mid {
                background-color: #e1f0ff;
                color: #4a95e5;
            }
            .phase-tag.late {
                background-color: #e8f8f5;
                color: #3aaa96;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">产后恢复计划</h1>
                </div>
                <div class="flex gap-3">
                    <i class="fas fa-share-alt"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 产后恢复概览卡片 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-chart-line"></i>
                        <span>恢复概览</span>
                    </div>

                    <div class="flex justify-between items-center mt-1 mb-2">
                        <div class="text-sm text-gray-700">产后天数：第25天</div>
                        <div class="text-sm font-medium text-pink-500">恢复期：产褥期</div>
                    </div>

                    <div class="flex justify-between items-center mb-1">
                        <div class="text-xs text-gray-500">总体恢复进度</div>
                        <div class="text-xs font-medium">45%</div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 45%"></div>
                    </div>

                    <!-- 恢复维度 -->
                    <div class="grid grid-cols-2 gap-2 mt-4">
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="flex justify-between items-center mb-1">
                                <div class="text-xs font-medium">身体恢复</div>
                                <div class="text-xs text-pink-500">60%</div>
                            </div>
                            <div class="progress-container h-1.5">
                                <div class="progress-bar" style="width: 60%"></div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="flex justify-between items-center mb-1">
                                <div class="text-xs font-medium">饮食营养</div>
                                <div class="text-xs text-blue-500">75%</div>
                            </div>
                            <div class="progress-container h-1.5">
                                <div class="progress-bar" style="width: 75%; background-color: #6ac8d0"></div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="flex justify-between items-center mb-1">
                                <div class="text-xs font-medium">心理调适</div>
                                <div class="text-xs text-purple-500">40%</div>
                            </div>
                            <div class="progress-container h-1.5">
                                <div class="progress-bar" style="width: 40%; background-color: #a991d4"></div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="flex justify-between items-center mb-1">
                                <div class="text-xs font-medium">运动恢复</div>
                                <div class="text-xs text-yellow-500">25%</div>
                            </div>
                            <div class="progress-container h-1.5">
                                <div class="progress-bar" style="width: 25%; background-color: #ffb347"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 恢复阶段时间线卡片 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-clock"></i>
                        <span>恢复阶段</span>
                    </div>

                    <div class="timeline-container">
                        <div class="timeline-item">
                            <div class="timeline-dot completed">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">产后1周</div>
                                <div class="timeline-subtitle">基础恢复期</div>
                                <div class="timeline-date">已完成</div>
                            </div>
                        </div>

                        <div class="timeline-item">
                            <div class="timeline-dot completed">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">产后2-4周</div>
                                <div class="timeline-subtitle">初步适应期</div>
                                <div class="timeline-date">进行中 (第25天)</div>
                            </div>
                        </div>

                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-title">产后1-3个月</div>
                                <div class="timeline-subtitle">稳定恢复期</div>
                                <div class="timeline-date">未开始</div>
                            </div>
                        </div>

                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-title">产后3-6个月</div>
                                <div class="timeline-subtitle">加强适应期</div>
                                <div class="timeline-date">未开始</div>
                            </div>
                        </div>

                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-title">产后6-12个月</div>
                                <div class="timeline-subtitle">全面恢复期</div>
                                <div class="timeline-date">未开始</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 当前阶段恢复计划卡片 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-list-check"></i>
                        <span>当前阶段恢复计划</span>
                    </div>

                    <div class="p-3 bg-gray-50 rounded-lg mb-4">
                        <div class="text-sm font-medium">产后2-4周 (初步适应期)</div>
                        <div class="text-xs text-gray-600 mt-1">
                            这个阶段身体各项功能逐渐恢复，可以适当增加活动量，注意保持良好的饮食习惯和充足的休息。
                        </div>
                    </div>

                    <!-- 身体恢复计划 -->
                    <div class="plan-item">
                        <div class="plan-icon physical">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                        <div class="plan-content">
                            <div class="plan-title">身体恢复</div>
                            <div class="plan-description">
                                持续关注伤口恢复，保持会阴部卫生。子宫开始缩小，恶露减少，可能有轻微下腹不适。
                            </div>
                            <div class="mt-3">
                                <div class="checklist-item">
                                    <div class="checklist-checkbox checked">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="checklist-label checked">保持会阴部清洁干燥</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox checked">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="checklist-label checked">定期更换产褥垫</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">每日观察恶露情况</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">盆底肌肉恢复练习</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 饮食营养计划 -->
                    <div class="plan-item">
                        <div class="plan-icon diet">
                            <i class="fas fa-utensils"></i>
                        </div>
                        <div class="plan-content">
                            <div class="plan-title">饮食营养</div>
                            <div class="plan-description">
                                继续保持营养均衡，适当增加蛋白质和钙的摄入，注重补铁。哺乳妈妈需要额外补充水分和维生素。
                            </div>
                            <div class="mt-3">
                                <div class="checklist-item">
                                    <div class="checklist-checkbox checked">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="checklist-label checked">每日摄入2000-2500ml水</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox checked">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="checklist-label checked">增加蛋白质摄入</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox checked">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="checklist-label checked">补充钙质和铁质</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">避免刺激性食物</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 心理调适计划 -->
                    <div class="plan-item">
                        <div class="plan-icon mental">
                            <i class="fas fa-brain"></i>
                        </div>
                        <div class="plan-content">
                            <div class="plan-title">心理调适</div>
                            <div class="plan-description">
                                产后情绪波动属正常现象，要识别产后抑郁信号。注意与家人沟通，合理安排休息时间。
                            </div>
                            <div class="mt-3">
                                <div class="checklist-item">
                                    <div class="checklist-checkbox checked">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="checklist-label checked">每日进行情绪记录</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">安排15分钟个人放松时间</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">与伴侣分享育儿感受</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">参与产后妈妈社区交流</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 运动恢复计划 -->
                    <div class="plan-item">
                        <div class="plan-icon exercise">
                            <i class="fas fa-walking"></i>
                        </div>
                        <div class="plan-content">
                            <div class="plan-title">运动恢复</div>
                            <div class="plan-description">
                                可以开始轻度活动，如短距离步行和简单的伸展运动。避免提重物和剧烈运动。
                            </div>
                            <div class="mt-3">
                                <div class="checklist-item">
                                    <div class="checklist-checkbox checked">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="checklist-label checked">每日短距离散步5-10分钟</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">轻柔的上肢伸展活动</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">简单的深呼吸练习</div>
                                </div>
                                <div class="checklist-item">
                                    <div class="checklist-checkbox"></div>
                                    <div class="checklist-label">避免腹部锻炼和重物搬运</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 恢复提醒卡片 -->
                <div class="card mb-8">
                    <div class="card-title">
                        <i class="fas fa-bell"></i>
                        <span>恢复提醒</span>
                    </div>

                    <div class="bg-pink-50 p-3 rounded-lg mb-3">
                        <div class="text-sm font-medium text-pink-800 mb-2">需要关注的信号</div>
                        <div class="text-xs text-pink-700">
                            如发现恶露有异常气味、发热超过38℃、伤口疼痛加剧或异常红肿，请立即咨询医生。
                        </div>
                    </div>

                    <div class="bg-blue-50 p-3 rounded-lg">
                        <div class="text-sm font-medium text-blue-800 mb-2">下次产检提醒</div>
                        <div class="text-xs text-blue-700">产后42天检查日期：2023年7月15日 上午10:00</div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // 复选框点击事件
                const checkboxes = document.querySelectorAll('.checklist-checkbox');
                checkboxes.forEach((checkbox) => {
                    checkbox.addEventListener('click', function () {
                        this.classList.toggle('checked');
                        if (this.classList.contains('checked')) {
                            this.innerHTML = '<i class="fas fa-check"></i>';
                            this.nextElementSibling.classList.add('checked');
                        } else {
                            this.innerHTML = '';
                            this.nextElementSibling.classList.remove('checked');
                        }
                        updateProgress();
                    });
                });

                // 模拟更新进度
                function updateProgress() {
                    // 简单示例，在实际应用中可以根据完成的任务数量计算真实进度
                    console.log('更新恢复进度');
                }

                // 时间线项目点击事件，用于查看历史阶段的恢复计划
                const timelineItems = document.querySelectorAll('.timeline-item');
                timelineItems.forEach((item) => {
                    item.addEventListener('click', function () {
                        // 在实际应用中可以导航到相应的历史恢复计划
                        const title = this.querySelector('.timeline-title').textContent;
                        console.log(`查看 ${title} 的恢复计划`);
                    });
                });
            });
        </script>
    </body>
</html>
